<template>
  <div style="background:#F7F7F7; height:100%; text-align:left">
    <scroll
      ref="specialLocalComment"
      :pullDownRefresh="true"
      :pullUpLoad="true"
      @pullingDown="onPullingDown"
      @pullingUp="onPullingUp">
        
      <div v-if="this.commentDataList" :style="{paddingTop: paddingTop + 'px'}">
        <div v-for="item in this.commentDataList" :key="item.id" class="productComment">
          <comment
            class="commentStyle"
            @commentAll="commentAll(item)"
            :headUrlImg="item.headUrl"
            :commentUsername="item.nickname"
            :dataRate="item.rate"
            :commentConent="item.comment"
            :matchImgUrl="item.matchImgUrl"
            :dateTime="item.createAt"
            :replyCounte="Number(item.replyCount)"
            @gotoUser="gotoUser(item)">
          </comment>
        </div>
      </div>

      <div  style="paddingTop: 120px;"  v-if="this.commentDataList.length == '0'">
        <not-data tip="没有评论~"></not-data>
      </div>

    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import comment from '@/components/comment/comment'
import Scroll from '@/components/scroll/scroll'
import { localUser } from '@/assets/js/local'
import notData from '@/components/not-data/not-data.vue'
import {isIphoneX} from '@/assets/js/brower'

export default {
  props: {
    commentDataList: {
      type: Array,
      default: []
    }
  },
  components: {
    comment,
    Scroll,
    notData
  },
  created () {
    this.paddingTop = 0
    if (isIphoneX()) {
      this.paddingTop = 70
    } else {
      this.paddingTop = 64
    }
  },
  mounted () {
    this.$refs.specialLocalComment.$el.style.height = (window.innerHeight - 40) + 'px'
  },
  methods: {
    commentAll (item) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        setTimeout(() => {
          this.$router.push('/login')
        })
        return
      }
      this.$store.commit('SET_CURRENT_COMMENT', item)
      this.$router.push(`/cart/productCommentDetails/10/${item.userId}`)
    },
    onPullingUp () {
      this.$emit('onPullingUp')
    },
    onPullingDown () {
      this.$emit('onPullingDown')
    },
    gotoUser (item) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        this.$router.push('/login')
      } else {
        this.$router.push(`/archives/${item.userId}`)
      }
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
.commentStyle{
  margin 10px
  padding 10px 10px 2px
  box-shadow 2px 2px 6px $color-text-2
}
.footer{
  height 70px
  width 100%
}
</style>
